<template>
  <el-dialog
    :visible="visible"
    min-width="400"
    min-height="232"
    :width="width"
    class="dialog"
    append-to-body
    :before-close="handleClose"
    :close-on-click-modal="false">
    <div slot="title" class="title">
      <!-- <el-tooltip class="item" effect="dark" :content="title" placement="right"> -->
        <p>{{title}}</p>
        <slot name="name"></slot>
      <!-- </el-tooltip> -->
      
    </div>
    <div class="content" v-loading="loading">
      <slot name="content"></slot>
    </div>
    <div class="footer">
      <slot name="footer" class="dialog-footer"></slot>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'

@Component({
  name: 'formDialog'
})
export default class extends Vue {
  @Prop({ default: '' }) private title!: string
  @Prop({ default: true }) private visible!: boolean
  @Prop({ default: '30%' }) private width!: string
  @Prop({ default: false }) private loading!: boolean
  @Emit('handleClose') handleClose() {}

  private basicDialogSlots = this.$scopedSlots;

  @Watch('visible')
  private changeVal(val: any) {
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/_elementVariables.scss';

p {
  margin: 0;
  padding: 0;
}
.iconicon_gaojing::before {
  font-size: 20px;
}
.dialog {
  ::v-deep .el-dialog {
    min-width: 490px !important;
    min-height: 232px;
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }
 ::v-deep .el-dialog__header {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    padding-left: 20px;
    border-bottom: 1px solid $--color-assist-divider;

    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;

      p {
        max-width: 85%;
        height: 50px;
        line-height: 50px;
        color: $--color-assist-default-text;
        font-size: $--title-font-size;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .el-dialog__headerbtn {
      top: 15px;
      width: 18px;
      height: 18px;

      .el-dialog__close {
        color: $--color-assist-value-text;
        font-size: $--title-font-size;
      }
    }
  }
::v-deep .el-dialog__body {
  padding: 0;
  min-height: 182px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;

  .content {
    padding: 20px 40px 30px 40px;
    min-height: 132px;
    width: 100%;

    .el-form {
      width: 100%;
      .el-form-item.el-form-item--medium,.el-form-item.el-form-item--small{
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .el-form-item__content {
          margin-left: 0 !important;
          width: 65%;
        }

        .el-form-item__label {
          padding-right: 20px;
          font-size: 12px;
          color: #333333;
        }

        .el-input-group--append {
          .el-input__inner {
            // min-width: 297px !important;
          }
        }

        .el-input__inner {
          // min-width: 330px;
          height: 32px;
          border-radius: 2px;
        }
        .el-textarea__inner {
          // min-width: 330px;
          border-radius: 2px;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 60px;
    padding: 0 20px 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid $--color-assist-divider;
  }
}
}
</style>